<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet"type="text/css"href="css/style.css" />
	</head>
	<body>
		<p>原图</p>
		<svg
		     width="50%"
		      aria-hidden="true" 
		      focusable="false"
		      data-prefix="fab" 
		      data-icon="affiliatetheme" 
		      class="svg-inline--fa fa-affiliatetheme fa-w-16" role="img" 
		      xmlns="http://www.w3.org/2000/svg" 
			  viewBox="0 0 512 512">
			<path fill="currentColor" 
			d="M159.7 237.4C108.4 308.3 43.1 348.2 14 326.6-15.2 304.9 2.8 230 54.2 159.1c51.3-70.9 116.6-110.8 145.7-89.2 29.1 21.6 11.1 96.6-40.2 167.5zm351.2-57.3C437.1 303.5 319 367.8 246.4 323.7c-25-15.2-41.3-41.2-49-73.8-33.6 64.8-92.8 113.8-164.1 133.2 49.8 59.3 124.1 96.9 207 96.9 150 0 271.6-123.1 271.6-274.9.1-8.5-.3-16.8-1-25z">
			</path>
			<p>改过后</p>
			</svg>
			<svg width="50%"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
			<ellipse cx="250"cy="100"rx="100"ry="50"style="fill:currentcolor;"></ellipse>
			<path d="M150 200c74.5 50,74.5 50,175 0c-50 300,-15 500,150 300C300 800,200 800,150 200"/>
		</svg>
		<p>原动画</p>
		<svg class="donghua" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
		<path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
		  s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
		  c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
		<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
		  C22.32,8.481,24.301,9.057,26.013,10.047z">
		  <animateTransform attributeType="xml"
		    attributeName="transform"
		    type="rotate"
		    from="0 20 20"
		    to="360 20 20"
		    dur="0.5s"
		    repeatCount="indefinite"/>
		  </path>
		</svg>
		<svg class="donghua" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		   width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
		  <rect x="0" y="0" width="4" height="7" fill="#333">
		    <animateTransform  attributeType="xml"
		      attributeName="transform" type="scale"
		      values="1,1; 1,3; 1,1"
		      begin="0s" dur="0.6s" repeatCount="indefinite" />       
		  </rect>
				
		  <rect x="10" y="0" width="4" height="7" fill="#333">
		    <animateTransform  attributeType="xml"
		      attributeName="transform" type="scale"
		      values="1,1; 1,3; 1,1"
		      begin="0.2s" dur="0.6s" repeatCount="indefinite" />       
		  </rect>
		  <rect x="20" y="0" width="4" height="7" fill="#333">
		    <animateTransform  attributeType="xml"
		      attributeName="transform" type="scale"
		      values="1,1; 1,3; 1,1"
		      begin="0.4s" dur="0.6s" repeatCount="indefinite" />       
		  </rect>
		</svg>
		  <svg class="donghua" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		     width="24px" height="30px" viewBox="0 0 24 30" style="margin-left: 15px;enable-background:new 0 0 50 50;" xml:space="preserve">
		    <rect x="0" y="0" width="4" height="20" fill="#333">
		      <animate attributeName="opacity" attributeType="XML"
		        values="1; .2; 1" 
		        begin="0s" dur="0.6s" repeatCount="indefinite" />
		    </rect>
		    <rect x="7" y="0" width="4" height="20" fill="#333">
		      <animate attributeName="opacity" attributeType="XML"
		        values="1; .2; 1" 
		        begin="0.2s" dur="0.6s" repeatCount="indefinite" />
		    </rect>
		    <rect x="14" y="0" width="4" height="20" fill="#333">
		      <animate attributeName="opacity" attributeType="XML"
		        values="1; 0.2; 1" 
		        begin="0.4s" dur="0.6s" repeatCount="indefinite" />
		    </rect>
		  </svg>
		  <p>改后的动画</p>
		  <svg class="donghua" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		   width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
		  <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
		    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
		    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
		  <circle cx="15"cy="8"r="1.5" fill="#000"id="yuan"/>
		    <animateTransform attributeType="xml"
		  			  xlink:href="#yuan"
		      attributeName="transform"
		      type="rotate"
		      from="0 20 20"
		      to="360 20 20"
		      dur="0.5s"
		      repeatCount="indefinite"/>
		  </svg>
		  <svg class="donghua" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		     width="32px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
		    <circle cx="4" cy="0"r="4" fill="#333">
		      <animate  attributeType="xml"
		        attributeName="cy"
		        values="1;24;1"
		        begin="0s" dur="0.6s" repeatCount="indefinite" />       
		    </circle>
		  		
		    <rect x="10" y="0" width="4" height="7" fill="#333">
		      <animateTransform  attributeType="xml"
		        attributeName="transform" type="scale"
		        values="1,1; 1,3; 1,1"
		        begin="0.2s" dur="0.6s" repeatCount="indefinite" />       
		    </rect>
		    <circle cx="24" cy="0"r="4" fill="#333">
		     <animate  attributeType="xml"
		       attributeName="cy"
		       values="1;24;1"
		       begin="0.4s" dur="0.6s" repeatCount="indefinite" />         
		    </circle>
		  </svg>
		  <svg class="donghua" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		     width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;margin-left: 15px;" xml:space="preserve">
		    <rect x="0" y="0" width="4" height="20" fill="#333">
		      <animate attributeName="opacity" attributeType="XML"
		        values="1; .2; 1" 
		        begin="0s" dur="0.6s" repeatCount="indefinite" />
		  				<animateTransform attributeName="transform" attributeType="XML"
		  				  type="scale"
		  				  values="0;1;0" 
		  				  begin="0s" dur="0.6s" repeatCount="indefinite" />
		    </rect>
		    <rect x="7" y="0" width="4" height="20" fill="#333">
		      <animate attributeName="opacity" attributeType="XML"
		        values="1; .2; 1" 
		        begin="0.2s" dur="0.6s" repeatCount="indefinite" />
		  				<animateTransform attributeName="transform" attributeType="XML"
		  				  type="scale"
		  				  values="0;1;0" 
		  				  begin="0.2s" dur="0.6s" repeatCount="indefinite" />
		    </rect>
		    <rect x="14" y="0" width="4" height="20" fill="#333">
		      <animate attributeName="opacity" attributeType="XML"
		        values="1; 0.2; 1" 
		        begin="0.4s" dur="0.6s" repeatCount="indefinite" />
		  				<animateTransform attributeName="transform" attributeType="XML"
		  				  type="scale"
		  				  values="0;1;0" 
		  				  begin="0.4s" dur="0.6s" repeatCount="indefinite" />
		    </rect>
	</body>
</html>
